<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="工资">
			<view slot="right" @click="search"><u-icon color="#162233" size="20px" name="search"></u-icon></view>
		</u-navbar>
		<view class="d-p-30">
			<view class="card d-p-30">
				<view class="sub-title d-font-30" style="color: #0882F3;">工资发放情况</view>
				<view class="d-m-t-20"><wages :wages="countData"></wages></view>
			</view>

			<view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">工资列表</text></view>
			<template v-if="list && list.length > 0">
				<view class="card d-m-t-30 d-p-30" v-for="(item, index) in list" :key="index" @click="wagesDetail(item)">
					<view class="d-flex d-col-top">
						<view class="d-flex-1 d-font-24">
							<view class="d-flex" style="color: #5D6672;">
								<view class="d-flex-1 ">
									<text style="font-weight: bold;">工资期（间）</text>
									<text class="d-m-l-20">{{ item.ffgzny }}</text>
								</view>
								<view class="" style="width: 260rpx;">
									<text style="font-weight: bold;">发放日期</text>
									<text class="d-m-l-20">{{ item.ffrq }}</text>
								</view>
							</view>
							<view class="d-flex d-m-t-20" style="color: #5D6672;">
								<view class="d-flex-1 ">
									<text style="font-weight: bold;">发放金额</text>
									<text class="d-m-l-20">{{ item.sfgzhj }}</text>
								</view>
								<view class="" style="width: 260rpx;">
									<text style="font-weight: bold;">发放人数</text>
									<text class="d-m-l-20">{{ item.ffrs }}</text>
								</view>
							</view>
						</view>
						<!-- <view>
							<u-button
								text="查看"
								size="mini"
								shape="circle"
								:customStyle="{
									color: '#FFB61D',
									borderColor: '#FFB61D'
								}"
								@click="wagesDetail(item)"
							></u-button>
						</view> -->
					</view>
				</view>
			</template>
			<template v-else>
				<view style="padding: 10vh;"><u-empty icon="/static/image/none.png" text="暂无数据"></u-empty></view>
			</template>
		</view>
	</view>
</template>

<script>
import { getWagesCount, getWagesList } from '../../../common/api.js';
import wages from '../components/wages.vue';
export default {
	components: {
		wages
	},
	data() {
		return {
			show: {
				showDate: false
			},
			countData: [],
			pageNum: 1,
			pageSize: 20,
			pageLast: 1,
			list: []
		};
	},
	onLoad() {
		this.init();
	},
	onReachBottom() {
		if (this.pageNum < this.pageLast) {
			++this.pageNum;
			this.getWagesList().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			getWagesCount({
				params: {
					bzid: this.$user.ssgcxx[this.$appIndex].bzid // 班组id
				}
			})
				.then(e => {
					this.countData = e.data;
				})
				.catch(e => {
					console.error(e);
				})
				.then(e => {
					this.pageNum = 1;
					this.getWagesList().then(e => {
						this.list = e.data;
						this.pageLast = Math.ceil(e.total / this.pageSize);
						uni.hideLoading();
					});
				});
		},
		getWagesList() {
			return getWagesList({
				params: {
					bzbh: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					deptId: this.$user.ssgcxx[this.$appIndex].deptId
				}
			});
		},
		wagesDetail(item) {
			uni.$u.route({
				url: '/pages/index/wages/wagesDetail',
				params: {
					id: item.id
				}
			});
		},
		search() {
			uni.$u.route({
				url: '/pages/index/wages/search',
				params: {
					type: 'wages'
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
}
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;

	.sub-title {
		position: relative;
		padding-left: 20rpx;
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 8rpx;
			height: 22rpx;
			background: #13a4fe;
			border-radius: 4rpx;
			bottom: 0;
			margin: auto;
		}
	}
}
</style>
